//多列表组件    

<template>
  <el-card class="box-card" style="width: 1700px;">
  <div slot="header" class="clearfix" style="display:flex;">
    <el-container class="input panel" style="width: 80%;display: grid;">
        <el-row :gutter="20" style="margin-left: 0;margin-top:15px;">
        <el-col :span="5">
          <div class="grid-content ep-bg-purple" />任务名称：{{ itemv.taskName }}
        </el-col>
        <el-col :span="8">
          <div class="grid-content ep-bg-purple" />描述：{{ itemv.keywords }}
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-left:0;">
  
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" />运行状态：<span :class="itemv.taskState == 0 ? 'b' : 'a'"
            style="float:right;">{{ itemv.taskState == 0 ? "未运行" : "运行中" }}</span>
        </el-col>
      </el-row>  
        </el-container>
        <el-container class="button panel" style="width: 10%;">
          <el-main direction="vertical" style="margin-right: 0%;padding-right: 0%;height: 100%;display:grid;">
            <el-button :type="itemv.taskState == 0 ? 'warning' : 'primary'" @click="pauseDialogVisible = true">{{
              itemv.taskState == 0
              ? "运行" :
              '暂停' }}</el-button>
            <el-button type="danger" style=" margin-left:0;margin-top: 10px;" @click="dialogVisible = true">删除</el-button>
          </el-main>
        </el-container>
  </div>
  <div class="text item">
    <el-container style="width:100%;">
      <el-row  style="margin-left:0;width: 100%;">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="已采集文件" name="1">
                <el-table
                  :data="tableData"
                  height="250"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="webpageId"
                    label="文件id"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="pageTitle"
                    label="标题"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="curUrl"
                    label="URL">
                  </el-table-column>
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </el-row>
          
    </el-container>
  </div>
  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>是否删除该爬虫任务</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="taskDelete(index)">删 除</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="pauseDialogVisible" width="30%" :before-close="handleClose">
      <span>是否{{ itemv.taskState==1 ? "暂停" : '运行' }}该爬虫任务</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="pauseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="taskPause(itemv.taskState)">{{ itemv.taskState==1 ? "暂 停" : '运 行'  }}</el-button>
      </span>
    </el-dialog>
</el-card>
            

</template>

<script>
import axios from 'axios';

export default {
  name: 'ComponentsList',

  props: {
    item: {
      type: Object,
      required: true,
      default: function () {
        return {};
      }
    },
    options: {
      type: Object,
      required: true,
      default: function () {
        return {};
      },
    },
    index: {
      type: Number,
      default: 0
    },
    submitUrl:{
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      tableData: [
      ],
      activeNames: [],
      value1: this.$props.item.updateMode,
      value2: this.$props.item.priority,
      dialogVisible: false,
      pauseDialogVisible: false,
      itemv: this.$props.item,
      drawer: false,
      crawlingLog: [],
      messages: [],
      intervalId: null
    }
  },
  mounted() {

    //var i=0;
    console.log('itemv', this.itemv);
    this.fetchData(this.itemv.crawlingTaskID);


  },
  methods: {
    handleChange(val) {
        console.log(val);
      },
    async fetchData(id) {
    try {
      const response = await axios.get('/api/task/getFileList', {
        params: {
          task_id: id  // 传递你的任务ID
        }
      });
      this.tableData = response.data;
    } catch (error) {
      console.error(error);
    }
  },
    taskPause(flag) {  //这里后面要把state数据修改至后台数据库  0为暂停  1为运行
      console.log('submitUrl.pauseUrl',this.submitUrl.pauseUrl);
      this.postPause(this.submitUrl.pauseUrl, this.itemv.crawlingTaskID, this.itemv.taskState)
      if (flag) {
        this.itemv.taskState = 0
      } else {
        this.itemv.taskState = 1
      }
      this.pauseDialogVisible = false
    },
    taskDelete(index) {
      this.$emit("deletS", index)
      this.dialogVisible = false
      console.log(this.itemv);
      const formData = new FormData()
      formData.append('crawlingTaskID', String(this.itemv.crawlingTaskID))
      this.postDel(this.submitUrl.deleteUrl, formData)

    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
        })
        .catch(() => { });
    },
    async postDel(url, formData) {
      this.$axios.post(url, formData

      ).then((res) => {
        console.log(res.data);
      })
    },
    checkLog() {
      var i = 0
      this.drawer = true;
      this.getLog(this.submitUrl.logUrl)
      const intervalId = setInterval(() => {
        var newData = i + ':日志等级:' + this.crawlingLog[i]['logLevel'] + '--------消息:' + this.crawlingLog[i]['logMessage']
        this.messages.push(newData);
        i++
        if (i >= 100) {
          clearInterval(intervalId); // 当达到指定次数后停止定时器
          console.log('定时器已停止');
        }
      }, 500); // 每隔1秒触发一次



    },

    async postPause(url, TaskID, State) {
      this.$axios.post(url, {
        crawlingTaskID: TaskID,
        taskState: State,

      }).then((res) => {
        console.log(res.data);
      })

    }
  },watch: {
    activeNames: {
      immediate: true, // 立即执行一次
      handler(newActiveNames) {
        if (newActiveNames.length > 0) {
          // 如果activeNames的长度大于零，每秒调用一次fetchData
          this.fetchData(this.itemv.crawlingTaskID); // 先执行一次，然后每秒调用一次
          this.fetchDataInterval = setInterval(() => {
            this.fetchData(this.itemv.crawlingTaskID);
          }, 1000);
        } else {
          // 如果activeNames的长度等于零，清除定时器
          clearInterval(this.fetchDataInterval);
        }
      }
    }
  },
  destroyed() {
    // 组件销毁时清除定时器
    clearInterval(this.fetchDataInterval);
  }
}


</script>

<style>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>